.http-flow-detail-descriptions {
    table {
        table-layout: fixed !important;
    }
}

.flow-detail-tabs {
    :global {
        .ant-tabs-top > .ant-tabs-nav::before {
            border-bottom: none !important;
        }
    }
}

.http-history-box {
    height: 100%;
    &-header {
        margin-bottom: 8px;
        :global {
            .ant-descriptions-item-content {
                max-width: 90px;
            }
            .ant-descriptions-item-label {
                background-color: var(--Colors-Use-Neutral-Bg);
            }
        }
    }
    .http-history-detail-wrapper {
        flex: 1;
        height: 100%;
        overflow: hidden;
        :global {
            .ant-col-24 {
                height: 100%;
            }
            .ant-col-5 {
                height: 100%;
                .ant-table-wrapper {
                    height: 100%;
                    .ant-spin-nested-loading {
                        height: 100%;
                        .ant-table {
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            .ant-table-container {
                                flex: 1;
                                overflow: hidden;
                                .ant-table-content {
                                    height: 100%;
                                    overflow: auto !important;
                                }
                            }
                        }
                    }
                }
            }
        }
        .table-header {
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
    }
}
.empty-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--Colors-Use-Neutral-Border);
    border-radius: 4px 0 0 4px;
    .empty-box-fold-box {
        height: 33px;
        border-bottom: 1px solid var(--Colors-Use-Neutral-Border);
        padding: 0 12px;
        .empty-box-icon-box {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .fold-icon {
                color: var(--Colors-Use-Neutral-Text-3-Secondary);
                cursor: pointer;
                border-radius: 4px;
                width: 24px;
                height: 24px;
                display: flex;
                justify-content: center;
                align-items: center;
                svg {
                    width: 16px;
                    height: 16px;
                }
            }
        }
        .fold-icon:hover {
            background-color: var(--Colors-Use-Neutral-Bg);
            color: var(--Colors-Use-Main-Primary);
        }
    }
    :global {
        .ant-empty {
            overflow: auto;
            padding-bottom: 12px;
        }
    }
}

.http-history-fold-box {
    width: 22px;
    height: 100%;

    .http-history-icon-box {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .fold-icon {
            color: var(--Colors-Use-Neutral-Text-3-Secondary);
            cursor: pointer;
            border-radius: 4px;
            width: 24px;
            height: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            svg {
                width: 16px;
                height: 16px;
            }
        }
    }
    .fold-icon:hover {
        background-color: var(--Colors-Use-Neutral-Bg);
        color: var(--Colors-Use-Main-Primary);
    }
}
.http-history-fold-border-box {
    width: 32px;
    border-radius: 2px;
    border: 1px solid var(--Colors-Use-Neutral-Border);
}

.httpFlow-data-table {
    height: 100%;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    max-width: 100%;
    :global {

        .ant-table {
            overflow: hidden;
        }
        .ant-table.ant-table-bordered > .ant-table-title {
            height: 33px;
            min-height: 33px;
            padding: 0 12px;
            background-color: var(--Colors-Use-Basic-Background);
            border-color: var(--Colors-Use-Neutral-Border);
        }
        // table相关
        .ant-table-thead > tr > th,
        .ant-table-tbody > tr > td {
            padding: 8px 16px;
        }
        .ant-table-thead > tr > th {
            color: var(--Colors-Use-Neutral-Text-1-Title);
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 16px;
            background: var(--Colors-Use-Neutral-Bg);
        }
        .ant-table.ant-table-bordered > .ant-table-container {
            border-color: var(--Colors-Use-Neutral-Border);
        }
        .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table,
        .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {
            border-color: var(--Colors-Use-Neutral-Border);
        }
        .ant-table-tbody {
            background-color: var(--Colors-Use-Basic-Background);
        }
        .ant-table-thead > tr > th,
        .ant-table-tbody > tr > td {
            border-bottom: 1px solid var(--Colors-Use-Neutral-Border);
            color: var(--Colors-Use-Neutral-Text-1-Title);
        }
        .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > thead > tr > th,
        .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > tbody > tr > td {
            border-right: 1px solid var(--Colors-Use-Neutral-Border);
        }
        .ant-table-tbody > tr.ant-table-row:hover > td,
        .ant-table-tbody > tr > td.ant-table-cell-row-hover {
            background: var(--Colors-Use-Neutral-Bg-Hover);
        }
        .ant-table-filter-trigger:hover {
            color: var(--Colors-Use-Neutral-Text-1-Title);
            background: var(--Colors-Use-Neutral-Bg-Hover);
        }
        // 分页相关
        .ant-pagination-item-active {
            border-color: var(--Colors-Use-Main-Border);
        }
        .ant-pagination-item-active a {
            color: var(--Colors-Use-Main-Primary);
        }
        .ant-pagination-item:hover a {
            color: var(--Colors-Use-Main-Primary);
        }
        .ant-pagination-prev:not(.ant-pagination-disabled):hover .ant-pagination-item-link,
        .ant-pagination-next:not(.ant-pagination-disabled):hover .ant-pagination-item-link {
            color: var(--Colors-Use-Main-Primary);
            border-color: var(--Colors-Use-Main-Border);
        }
        .ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-link-icon,
        .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon {
            color: var(--Colors-Use-Main-Primary);
        }
        .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
            border-color: var(--Colors-Use-Main-Border);
        }
        .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
            border-color: var(--Colors-Use-Main-Border);
            box-shadow: 0 0 0 2px rgb(242 139 68 / 20%);
        }
        .ant-pagination-options-quick-jumper input:hover {
            border-color: var(--Colors-Use-Main-Border);
        }
        .ant-pagination-options-quick-jumper input:focus,
        .ant-pagination-options-quick-jumper input-focused {
            border-color: var(--Colors-Use-Main-Border);
            box-shadow: 0 0 0 2px rgb(242 139 68 / 20%);
        }
        .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
            background-color: rgba(242, 139, 68, 0.1);
        }
        a.ant-typography-ellipsis-single-line,
        span.ant-typography-ellipsis-single-line {
            color: var(--Colors-Use-Neutral-Text-1-Title);
        }
    }
    .filter-icon {
        svg {
            width: 16px;
            height: 16px;
        }
    }
    .filter-icon-color {
        color: var(--Colors-Use-Main-Primary);
    }

    .position-icon {
        cursor: pointer;
        color: var(--Colors-Use-Neutral-Text-3-Secondary);
        svg {
            width: 16px;
            height: 16px;
        }
        &:hover {
            color: var(--Colors-Use-Main-Primary);
        }
    }
    .position-icon-active {
        color: var(--Colors-Use-Main-Primary);
    }
    .table-rule-content {
        display: flex;
        align-items: center;
        gap: 4px;
        overflow: hidden;
    }
}
.render-html-box {
    height: 100%;
    overflow: auto;
    :global {
        img {
            max-width: 100%;
        }
    }
}

.type-options-checkable-tag {
    display: flex;
    :global {
        .ant-tag {
            margin-right: 2px;
        }
    }
}

.jump-web-tree {
    cursor: pointer;
    color: var(--Colors-Use-Main-Primary);
    svg {
        width: 18px;
        height: 18px;
    }
}

.codec-menu-popover {
    .codec-menu-cont-wrapper {
        .codec-menu-item {
            display: flex;
            justify-content: space-between;
            padding: 6px 8px;
            cursor: pointer;
            color: var(--Colors-Use-Neutral-Text-1-Title);
            font-size: 14px;
            line-height: 20px;
            width: 130px;
            &.active {
                color: var(--Colors-Use-Main-Primary);
            }
            &:hover {
                background-color: var(--Colors-Use-Neutral-Bg-Hover);
            }
            .check-icon {
                svg {
                    color: var(--Colors-Use-Main-Primary);
                }
            }
        }
    }
    :global {
        .ant-popover-inner {
            border: 1px solid var(--Colors-Use-Neutral-Border);
            box-shadow: 0px 8px 16px var(--Colors-Use-Basic-Shadow);
            border-radius: 4px;
            .ant-popover-inner-content {
                padding: 6px 4px 4px 4px;
            }
        }
    }
}

.detail-header-info {
    :global {
        .ant-descriptions-item-content {
            max-width: 90px;
        }
    }
}

.fuzzable-param-list-container {
    max-height: 50vh;
    .fuzzable-param-list-tag {
        max-width: 100%;
    }
}

.filter-dropdown {
    padding-top: 5px;
    background-color: var(--Colors-Use-Basic-Background);
    color: var(--Colors-Use-Neutral-Text-1-Title);
}